import React from 'react';
// 一个二级的动态路由不同的id值加载不同的小说内容
// 【重点】路由传参5方式：导航里的to对象中国serach，hash，state，动态路由，在route渲染属性中通过props传递给组件
import { BrowserRouter, NavLink, Route } from 'react-router-dom';
// 子组件

const Book = props => {
  // 将动态路由中的参数结构出来
  const { match } = props;
  const { params } = match;
  // 请求数据过来
  const { book } = require('./data.json.js');
  // 用路由的参数查找数据里对应里的信息
  const { text } = book.find(item => item.id === params.id);

  return <div dangerouslySetInnerHTML={{ __html: text }}></div>;
  // return <div>{text}</div>;
};
const Index = () => {
  return (
    <BrowserRouter>
      <NavLink to="/book/1">斗破苍穹</NavLink>
      <NavLink to="/book/9">斗罗大陆</NavLink>
      {/* 动态路由 */}
      <Route path="/book/:id" component={Book} />
    </BrowserRouter>
  );
};

export default Index;
